<template>
  <div id="home">
    <head-tab></head-tab>
    <div class="main">
      <a-menu
        style="width: 156px; height: calc(100vh - 60px); flex-basis: 156px"
        :selectedKeys="[routerConfig[$route.path]]"
        mode="inline"
        @click="handleClick"
      >
        <a-menu-item-group key="g1">
          <template slot="title"><span>百宝箱</span> </template>
          <a-menu-item v-for="item in MenuList" :key="item.key" @click="goModel(item)">
            {{ item.name }}
          </a-menu-item>
        </a-menu-item-group>
      </a-menu>
      <div id="contentDetail">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import HeadTab from "./Tab.vue";
export default {
  components: {
    HeadTab,
  },
  data() {
    return {
      routerConfig:{
        "/blog":"1",
        "/file":"2",
        "/site":"3",
        "/video":"4"
      },
      MenuList: [
        { key: "1", name: "博客", route: "/blog" },
        { key: "2", name: "文件", route: "/file" },
        { key: "3", name: "网站", route: "/site" },
        { key: "4", name: "视频", route: "/video" },
      ],
    };
  },
  watch: {
    openKeys(val) {
      console.log("openKeys", val);
    },
  },
  methods: {
    goModel(item) {
      this.$route.path !== item.route && this.$router.push(item.route);
    },
    handleClick(e) {
      console.log("click", e);
    },
    titleClick(e) {
      console.log("titleClick", e);
    },
  },
};
</script>
<style scoped lang="less">
#home {
  .main {
    display: flex;
    justify-content: flex-start;
  }
  #contentDetail {
    width: calc(100vw - 156px);
    height: calc(100vh - 60px);
    overflow: scroll;
  }
}
</style>
